<template>
	<view>
		<div class="BindVisitor">
			<div class="tab">
				<!-- <div @click='active=0' :class="['tabitem', active==0?'active':''] ">成人</div> -->
				<!-- <div @click='active=1' :class="['tabitem',  active==1?'active':'']">儿童</div> -->
			</div>
		</div>
		<p style="color: #9a9b9d;">本院实行实名制就诊，请如实填写就诊人信息如因信息错误产生的一切后果自行负责。</p>
		<p style="color: #efd23f;">线上医保仅支持本人，绑定社保卡后可使用医保个账线上支付</p>
		<ul class="infoCard">
			<!-- 			<li>
				<p>关系</p>
				<p @click='show=true' style="flex: 1;"> <span>{{relationship}}</span> <span
						v-if="!relationship">请选择关系</span>
					<u-picker :show="show" :columns="columns" @cancel="show=false" @confirm="confirm"></u-picker>
				</p>		
			</li> -->
			<li>
				<p>真实姓名</p>
				<input type="text" placeholder="请输入真实姓名" v-model="name">
			</li>
			<li>
				<p>身份证</p>
				<input :class="[err?'err':'']" type="number" maxlength="18" placeholder="请输入身份证" @input="checkId"
					v-model="idNum" @blur="checkId">
			</li>
			<li>
				<p>性别</p>
				<div class="checkbox">
					<radio-group name="sex" @change="changeSex" class="checkbox">
						<label v-for="(item,index) in sexArr" :key="index">
							<radio :value="item" /><text>{{item}}</text>
						</label>
					</radio-group>
				</div>
			</li>
			<li>
				<p>出生日期</p>
				<span>{{birth}}</span>
				<span style="color: #808080;" v-if="!birth">输入完身份证自动填充</span>
			</li>
			<li>
				<p>手机号码</p>
				<input type="text" maxlength="11" placeholder="请输入手机号码" v-model="phone">
			</li>
			<li>
				<p>密码</p>
				<input type="text" maxlength="11" placeholder="请输入密码" v-model="password">
			</li>
		</ul>

		<view class="register" @click="register">立即绑定</view>

	</view>

</template>

<script>
	// import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup';
	export default {
		data() {
			return {
				// active: 0,
				show: false,
				// columns: [
				// 	['本人', '他人']
				// ],
				sexArr: ['男', '女'],
				// relationship: null,
				sex: null,
				idNum: '',
				birth: null,
				err: false,
				name: '',
				phone: '',
				password: '',
				age: '',
			}
		},
		methods: {
			confirm(e) {
				this.relationship = e.value[0]
				this.show = false
			},
			changeSex(e) {
				this.sex = e.detail.value;
				console.log(this.sex);
			},
			checkId() {
				let reg =
					/^\d{6}((((((19|20)\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(((19|20)\d{2})(0[13578]|1[02])31)|((19|20)\d{2})02(0[1-9]|1\d|2[0-8])|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))0229))\d{3})|((((\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((\d{2})(0[13578]|1[02])31)|((\d{2})02(0[1-9]|1\d|2[0-8]))|(([13579][26]|[2468][048]|0[048])0229))\d{2}))(\d|X|x)$/
				if (reg.test(this.idNum)) {
					this.err = false
					this.birth = this.idNum.slice(6, 10) + '年' + this.idNum.slice(10, 12) + '月' + this.idNum.slice(12,
						14) + '日'
				} else {
					this.err = true
					this.birth = null
				}
			},

			// 点击注册
			register() {
				// 手记号正则
				let phonereg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				// 密码正则
				let passwordreg = /^[A-Za-z0-9]{6}$/;
				// 身份证号正则
				let idreg =
					/^\d{6}((((((19|20)\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(((19|20)\d{2})(0[13578]|1[02])31)|((19|20)\d{2})02(0[1-9]|1\d|2[0-8])|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))0229))\d{3})|((((\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((\d{2})(0[13578]|1[02])31)|((\d{2})02(0[1-9]|1\d|2[0-8]))|(([13579][26]|[2468][048]|0[048])0229))\d{2}))(\d|X|x)$/



				


				// 姓名
				if (this.name.trim() == '') {
					uni.showToast({
						icon: 'error',
						title: '姓名不能为空',
						duration: 1000
					})
					return
				} else if (!idreg.test(this.idNum)) { //身份证
					uni.showToast({
						icon: 'error',
						title: '身份证号不正确',
						duration: 1000
					})
					return
				} else if (this.sex == null) { //性别
					uni.showToast({
						icon: 'error',
						title: '性别不能为空',
						duration: 1000
					})
					return
				} else if (!phonereg.test(this.phone)) { //手机号
					uni.showToast({
						icon: 'error',
						title: '手记号不正确',
						duration: 1000
					})
					return
				} else if (!passwordreg.test(this.password)) { //密码
					uni.showToast({
						icon: 'error',
						title: '密码不正确',
						duration: 1000
					})
					return
				} else {
					console.log("age222=>", age)

					uni.request({
						url: 'http://192.168.36.46:3000/patient/find/registerTel?phone=' + this.phone
					}).then(res => {
						console.log("找手机=>", res)
						if (res.data.code == 200) { //该手机号已经注册
							uni.showToast({
								icon: 'error',
								title: '您已有就诊卡,请登陆',
								duration: 2000
							})
							uni.navigateTo({
								url:'/pages/Login/login'
							})
							return
						} else if (res.data.code == 500) { //该手机没注册  就去注册
						
						let a = this.birth.substr(0, 4)
						let nowtime = new Date().toLocaleString().substr(0, 4)
						console.log("a=>", a)
						console.log("nowtime=>", nowtime)
						let age = Number(nowtime) - Number(a)
						console.log("age=>", age)
						
							uni.request({
								url: 'http://192.168.36.46:3000/patient/register?name=' + this.name +
									'&sex=' + this.sex +
									'&phone=' + this.phone + '&password=' + this.password + '&idCard=' +
									this.idNum +
									'&age=' + age
							}).then(res => {
								console.log(res)
								if (res.data.code == 200) {
									uni.showToast({
										icon: 'success',
										title: '绑定成功',
										duration: 1000
									})
								}
								uni.navigateTo({
									url:'/pages/Visits/Visits?name='+res.data.name
								})
							})
						}
					})








				}

				console.log(1111111111)
				console.log(this.name);
				console.log(this.sex);
				console.log(this.phone);
				console.log(this.idNum);
				console.log(this.birth);
				console.log(this.password);


			},


		},
	}
</script>

<style lang="scss">
	.err {
		border: 1px red solid;
	}

	.checkbox {
		width: 150px;
		display: flex;
		justify-content: space-between;

	}

	.infoCard {
		margin-top: 20px;
		padding: 0;
		background-color: #fff;
		border-radius: 5%;
		padding: 20px 16px;

		li {
			list-style: none;
			display: flex;
			margin: 20px 0;

			p {
				width: 30%;
			}
		}
	}

	page {
		background-color: #f6f7f9;
		padding: 0 20px;
	}

	.tab {
		padding: 20px 0;
		box-sizing: border-box;
		display: flex;
		text-align: center;

		.tabitem {
			width: 50%;
			padding: 5px 0px;
			background-color: #f0f0f2;

			&:nth-child(1) {
				border-radius: 5px 0 0 5px;
			}

			&:nth-child(2) {
				border-radius: 0 5px 5px 0px;
			}
		}

		.active {
			background-color: #6acbb5;
			color: #fff;
		}
	}

	.register {
		width: 330px;
		height: 50px;
		color: #fff;
		line-height: 50px;
		text-align: center;
		border-radius: 5px;
		margin: 30px auto;
		background-color: #6dcab7;
	}
</style>